<template>
  <ul class="test-container">
    <li v-for="item in list" :key="item.id" @click="show(item)">
      <img :src="item.url" alt />
      <span v-if="item.subShow" >
        <img src="@/assets/logo.png" alt width="20" />
      </span>
    </li>
  </ul>
</template>

<script>
// 交互要求：点击哪一项哪一项就变成激活状态（显示vue图标）
import { ref } from 'vue'
export default {
  setup () {
    const list = ref([
      {
        id: 1,
        url: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/fresh_goods_2.jpg'
      },
      {
        id: 2,
        url: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/fresh_goods_2.jpg'
      },
      {
        id: 3,
        url: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/fresh_goods_2.jpg'
      },
      {
        id: 4,
        url: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/fresh_goods_2.jpg'
      }
    ])
    list.value.forEach(itm => {
      itm.subShow = false
    })
    function show (item) {
      list.value.forEach(itm => {
        itm.subShow = false
      })
      item.subShow = true
    }
    return {
      list,
      show
    }
  }
}
</script>

<style scoped lang='less'>
.test-container {
  display: flex;
  li {
    position: relative;
    cursor: pointer;
    > img {
      width: 200px;
      height: 200px;
    }
    span {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 20px;
      height: 20px;
      img {
        width: 100%;
      }
    }
  }
}
</style>
